@import '../../styles/global.less';
.k-checkbox-wp {
  cursor: pointer;
  font-size: 28px;
  display: inline-block;
  user-select: none;
  line-height: 1;
  .k-checkbox {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    outline: 0;
    line-height: 1;
    position: relative;
    box-sizing: content-box;
    font-size: 0;
    .k-checkbox-inner {
      box-sizing: content-box;
      display: inline-block;
      width: 28px;
      height: 28px;
      position: relative;
      top: 0;
      left: 0;
      border: 1px solid @borderColor;
      border-radius: 2px;
      background-color: #fff;
      transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
      overflow: hidden;
      color: #fff;
      border-radius: 50%;
      .k-icon {
        font-size: 28px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
      }
    }
    .k-checkbox-input {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      cursor: pointer;
      opacity: 0;
    }
    &+span {
      padding: 0 8px;
    }
  }
  .k-checkbox-checked {
    .k-checkbox-inner {
      background: @main;
      border-color: @main;
      position: relative;
    }
  }
  .k-checkbox-indeterminate {
    .k-checkbox-inner {
      // background  : @main;
      // border-color: @main;
      position: relative;
      &:after {
        box-sizing: content-box;
        background-color: @main;
        position: absolute;
        width: 8px;
        height: 8px;
        content: '';
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all .2s ease-in-out;
        // border-radius: 2px;
      }
    }
  }
  &:hover .k-checkbox-inner {
    border-color: @main;
  }
}

.k-checkbox-disabled {
  cursor: not-allowed;
  color: @disableColor;
  .k-checkbox {
    .k-checkbox-input {
      cursor: not-allowed;
    }
    .k-checkbox-inner {
      background: @disableBack;
      border-color: @disableBorder;
      color: @disableColor;
      &:after {
        background-color: @disableBack;
        color: @disableColor;
      }
    }
  }
  .k-checkbox-indeterminate .k-checkbox-inner:after {
    background-color: @disableBorder;
  }
}

.k-checkbox-group {
  display: inline-block;
}